<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>友情链接</span>
                <el-button @click="add()" size="small" type="primary" plain>
                    <el-icon>
                        <CirclePlus />
                    </el-icon>添加连接
                </el-button>
            </div>
        </template>
        <el-table :data="datas">
            <el-table-column width="40" label="#" prop="id" />
            <el-table-column label="链接标题" prop="title" />
            <el-table-column label="网站地址" prop="url" />
            <el-table-column label="添加日期" prop="create_time" />
            <el-table-column width="300" size="small" label="操作">
                <template #default="scope">
                    <el-button @click="edit(scope.row,scope.$index)" type="success" plain>
                        <el-icon>
                            <EditPen />
                        </el-icon>编辑
                    </el-button>
                    <el-button @click="open()" type="primary" plain>
                        <el-icon>
                            <Delete />
                        </el-icon> 启用
                    </el-button>
                    <el-button @click="remove(scope.$index,scope.row.id)" type="danger" plain>
                        <el-icon>
                            <Delete />
                        </el-icon> 删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog v-model="editDialog" title="编辑标签" width="30%">
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="链接标题" prop="name">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="链接地址" prop="name">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="name">
                <el-input v-model="form.link_order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialog = false">取消</el-button>
                <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加dialog -->
    <el-dialog v-model="addDialog" title="编辑标签" width="30%">
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="链接标题" prop="name">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="链接地址" prop="name">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="name">
                <el-input v-model="form.link_order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialog = false">取消</el-button>
                <el-button type="primary" @click="handleAdd(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>

</template>
<script setup>
import { ref } from 'vue';
import Link from '@/api/Link';
// import { ElMessage } from 'element-plus';
let datas = ref([]);
async function loadList() {
    let { status, msg, data } = await Link.link();
    if (status) {
        datas.value = data;
        ElMessage(msg);
    } else {
        ElMessage(msg);
    }
}
loadList();

let editDialog = ref(false);
let addDialog = ref(false);
let form = ref({
    create_date: '',
    create_time: '',
    id: '',
    link_order: '',
    title: '',
    update_date: '',
    url: '',
    usable: '',
});
let formRef = ref();
//缓存当前行
let current = ref(0);
let edit = (data, index) => {
    editDialog.value = true;
    form.value = { ...data };
    current.value = index;
}
let handleEdit = async (formEl) => {
    let { status, msg } = await Link.edit(form.value.id, { title: form.value.title, url: form.value.url, link_order: form.value.link_order });
    if (status) {
        editDialog.value = false;
        datas.value[current.value] = form.value;
        ElMessage(msg);
    }
}
//添加
let add = () => {
    addDialog.value = true;
}
let handleAdd = async (formEl) => {
    let { status, msg } = await Link.add({ ...form.value });
    if (status) {
    datas.value.push(form.value);
    ElMessage.success(msg);
    }
    addDialog.value = false;
}
// 移除
let remove = async (index, id) => {
    let { status, msg } = await Link.remove(id);
    if (status) {
        datas.value.splice(index, 1);
        ElMessage.success(msg);
    }
}
</script>
<style lang="less">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>